<template>
  <div>
    <Page auto-content-height>
      <Grid table-title="用户列表">
        <template #action="{ row }">
          <Popover title="" placement="bottom">
            <template #content>
              <template v-if="!row.storeId">
                <span class="cursor-pointer" @click="openDrawer(row)"
                  >分配微馆管理员</span
                >
              </template>
              <template v-else>
                <Popconfirm
                  title="确定要解除微馆管理员？"
                  @confirm="() => handleBusRemove(row)"
                >
                  <span class="cursor-pointer">解除微馆管理员</span>
                </Popconfirm>
              </template>
            </template>
            <Button type="link">更多</Button>
          </Popover>
        </template>
      </Grid>
    </Page>
    <Drawer ref="dictDrawer" @success="() => gridApi.query()" />
  </div>
</template>

<script lang="ts" setup>
import { Page, useVbenDrawer } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { onMounted, ref } from 'vue';
import { formOptions, gridOptions, idKey, handleId } from './data/options';
import { queryRemove, busRemove } from './data/api';
import { Button, Popconfirm, Popover, message } from 'ant-design-vue';
// import EditDrawer from './components/editDrawer.vue';
import AllocateDrawer from './components/allocateDrawer.vue';

const [Drawer, drawerApi] = useVbenDrawer({
  connectedComponent: AllocateDrawer,
});
const dictDrawer = ref(null);

onMounted(() => {
  initData();
});

//  初始化数据
const initData = async () => {};

//  表格配置
const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});

// 打开抽屉
const openDrawer = (row: any) => {
  drawerApi.setData({
    ...row,
  });
  handleId.value = row[idKey.value];
  drawerApi.open();
};

// 解除微馆管理员
const handleBusRemove = async (row: any) => {
  let res: any = await busRemove({
    userId: row[idKey.value],
    userStoreId: row['userStoreId'],
  });
  console.log(res);
  message.success(res.message);
  gridApi.query();
};
</script>
